<template>
    <div>
        <el-page-header icon="" title="我的管理系统">
            <template #content>
                <span class="text-large font-600 mr-3"> 个人中心 </span>
            </template>
        </el-page-header>
    </div>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card class="box_card">
                    <el-avatar :size="160" :src="circleUrl" />
                    <h3>{{ store.state.userInfo.username }}</h3>
                    <h3>{{ store.state.userInfo.role == 1 ? "管理员" : "编辑" }}</h3>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>个人信息</span>
                        </div>
                    </template>
                    <el-form ref="userFormRef" style="max-width: 600px" :model="userForm" status-icon :rules="userRules"
                        label-width="auto" class="demo-ruleForm">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="userForm.username" type="text" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="性别" prop="gender">
                            <el-select v-model="userForm.gender" placeholder="性别">
                                <el-option label="隐藏" :value="0" />
                                <el-option label="男" :value="1" />
                                <el-option label="女" :value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="简介" prop="introduction">
                            <el-input v-model="userForm.introduction" type="textarea" />
                        </el-form-item>
                        <el-form-item label="头像" prop="avatar">
                            <UploadPicture :imageUrl="imageUrl" @handleAvatarSuccess="handleAvatarSuccess" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm()">
                                更新
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { useStore } from "vuex"
import { computed, ref, reactive, onMounted } from "vue"
import { ElMessage } from 'element-plus'
import axios from "axios";
import UploadPicture from "@/components/upload/UploadPicture"

const store = useStore()
const userFormRef = ref()

let imageUrl = ref(store.state.userInfo.avatar)

const { _id, username, gender, introduction, avatar } = store.state.userInfo

const userForm = reactive({
    _id,
    username,
    gender,
    introduction,
    avatar
})

const userRules = reactive({
    username: [{
        required: true,
        message: "用户名不能为空",
        trigger: blur
    }],
    gender: [{
        required: true,
        message: "请选择性别",
        trigger: blur
    }],
    introduction: [{
        required: true,
        message: "个人简介不能为空",
        trigger: blur
    }],
    avatar: [{
        required: true,
        message: "请上传头像",
        trigger: blur
    }],
})


const handleAvatarSuccess = (file) => {
    imageUrl.value = file
    userForm.avatar = imageUrl.value
}

onMounted(() => {

})

const submitForm = () => {
    userFormRef.value.validate((valid) => {
        if (valid) {
            axios.post("/api/admin/user/update", userForm).then(res => {
                // console.log(res.data.data);
                if (res.data.code == 200) {
                    store.commit("changeUserInfo", res.data.data)
                    ElMessage({
                        type: 'success',
                        message: "更新成功",
                    })
                }
            })
        } else {
            ElMessage({
                type: 'warning',
                message: "请确保信息输入完整",
            })
        }
    })
}

const circleUrl = computed(() => {
    return store.state.userInfo.avatar
        ? store.state.userInfo.avatar
        : "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
});
</script>
<style lang="scss" scoped>
.el-row {
    margin-top: 20px;

    .box_card {
        text-align: center;

        h3 {
            margin-top: 20px;
        }
    }
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>